<template>
  <div class="report-viewing-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">报表查看</h1>
        <p class="page-subtitle">查看、导出报告并获取AI智能总结</p>
      </div>
      <div class="header-right">
        <button class="header-btn" @click="refreshReports">
          🔄 刷新
        </button>
        <button class="header-btn" @click="bulkExport">
          📤 批量导出
        </button>
        <button class="header-btn primary" @click="generateNewReport">
          ➕ 生成新报表
        </button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 左侧报表列表 -->
      <div class="reports-panel">
        <!-- 搜索和筛选 -->
        <div class="filter-section">
          <div class="search-box">
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索报表名称..."
              class="search-input"
              @keyup.enter="searchReports"
            />
            <button class="search-btn" @click="searchReports">🔍</button>
          </div>
          
          <div class="filter-controls">
            <select v-model="selectedType" class="filter-select">
              <option value="">所有类型</option>
              <option value="daily">日报</option>
              <option value="weekly">周报</option>
              <option value="monthly">月报</option>
              <option value="quarterly">季报</option>
              <option value="annual">年报</option>
            </select>
            
            <select v-model="selectedCategory" class="filter-select">
              <option value="">所有分类</option>
              <option value="operation">运行报告</option>
              <option value="maintenance">维护报告</option>
              <option value="fault">故障分析</option>
              <option value="performance">性能分析</option>
            </select>
            
            <select v-model="sortBy" class="filter-select">
              <option value="date">按日期排序</option>
              <option value="name">按名称排序</option>
              <option value="size">按大小排序</option>
            </select>
          </div>
        </div>

        <!-- 报表列表 -->
        <div class="reports-list">
          <div class="list-header">
            <label class="select-all">
              <input 
                type="checkbox" 
                :checked="isAllSelected"
                @change="toggleSelectAll"
              />
              全选
            </label>
            <span class="report-count">{{ filteredReports.length }} 个报表</span>
          </div>

          <div 
            v-for="report in paginatedReports" 
            :key="report.id"
            class="report-item"
            :class="{ 
              selected: selectedReports.includes(report.id),
              active: currentReport && currentReport.id === report.id 
            }"
            @click="selectReport(report)"
          >
            <div class="report-header">
              <label class="report-checkbox" @click.stop>
                <input 
                  type="checkbox" 
                  :checked="selectedReports.includes(report.id)"
                  @change="toggleReportSelection(report.id)"
                />
              </label>
              
              <div class="report-icon">
                {{ getReportIcon(report.type) }}
              </div>
              
              <div class="report-info">
                <h4 class="report-name">{{ report.name }}</h4>
                <div class="report-meta">
                  <span class="report-type">{{ getReportTypeText(report.type) }}</span>
                  <span class="report-category">{{ getCategoryText(report.category) }}</span>
                  <span class="report-date">{{ formatDate(report.generateTime) }}</span>
                </div>
              </div>
              
              <div class="report-status" :class="report.status">
                {{ getStatusText(report.status) }}
              </div>
            </div>

            <div class="report-description">
              {{ report.description }}
            </div>

            <div class="report-stats">
              <div class="stat-item">
                <span class="stat-label">页数:</span>
                <span class="stat-value">{{ report.pages }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">大小:</span>
                <span class="stat-value">{{ formatFileSize(report.size) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">格式:</span>
                <span class="stat-value">{{ report.format.toUpperCase() }}</span>
              </div>
            </div>

            <div class="report-actions">
              <button class="action-btn view" @click.stop="viewReport(report)">
                👁️ 查看
              </button>
              <button class="action-btn summary" @click.stop="generateSummary(report)">
                🤖 智能总结
              </button>
              <button class="action-btn download" @click.stop="downloadReport(report)">
                📥 下载
              </button>
              <button class="action-btn share" @click.stop="shareReport(report)">
                🔗 分享
              </button>
              <button class="action-btn delete" @click.stop="deleteReport(report)">
                🗑️ 删除
              </button>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <button 
            class="page-btn"
            :disabled="currentPage === 1"
            @click="changePage(currentPage - 1)"
          >
            上一页
          </button>
          
          <div class="page-numbers">
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="changePage(page)"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="page-btn"
            :disabled="currentPage === totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>

      <!-- 右侧报表详情和预览 -->
      <div class="detail-panel">
        <div v-if="currentReport" class="report-detail">
          <!-- 报表头部信息 -->
          <div class="detail-header">
            <div class="detail-title">
              <h2>{{ currentReport.name }}</h2>
              <div class="detail-meta">
                <span class="meta-item">
                  <span class="meta-icon">📊</span>
                  {{ getReportTypeText(currentReport.type) }}
                </span>
                <span class="meta-item">
                  <span class="meta-icon">📅</span>
                  {{ formatDate(currentReport.generateTime) }}
                </span>
                <span class="meta-item">
                  <span class="meta-icon">📄</span>
                  {{ currentReport.pages }} 页
                </span>
                <span class="meta-item">
                  <span class="meta-icon">💾</span>
                  {{ formatFileSize(currentReport.size) }}
                </span>
              </div>
            </div>
            
            <div class="detail-actions">
              <button class="detail-btn" @click="downloadReport(currentReport)">
                📥 下载
              </button>
              <button class="detail-btn" @click="printReport(currentReport)">
                🖨️ 打印
              </button>
              <button class="detail-btn primary" @click="generateSummary(currentReport)">
                🤖 智能总结
              </button>
            </div>
          </div>

          <!-- 智能总结区域 -->
          <div v-if="currentSummary" class="summary-section">
            <div class="summary-header">
              <h3>AI智能总结</h3>
              <div class="summary-actions">
                <button class="summary-btn" @click="regenerateSummary">
                  🔄 重新生成
                </button>
                <button class="summary-btn" @click="copySummary">
                  📋 复制
                </button>
                <button class="summary-btn" @click="exportSummary">
                  📤 导出
                </button>
              </div>
            </div>
            
            <div class="summary-content">
              <div class="summary-loading" v-if="summaryLoading">
                <div class="loading-spinner"></div>
                <span>AI正在分析报表内容...</span>
              </div>
              
              <div v-else class="summary-text">
                <div class="summary-highlights">
                  <h4>🔍 关键发现</h4>
                  <ul>
                    <li v-for="highlight in currentSummary.highlights" :key="highlight">
                      {{ highlight }}
                    </li>
                  </ul>
                </div>
                
                <div class="summary-insights">
                  <h4>💡 重要见解</h4>
                  <p>{{ currentSummary.insights }}</p>
                </div>
                
                <div class="summary-recommendations">
                  <h4>📋 建议措施</h4>
                  <ul>
                    <li v-for="recommendation in currentSummary.recommendations" :key="recommendation">
                      {{ recommendation }}
                    </li>
                  </ul>
                </div>
                
                <div class="summary-footer">
                  <div class="summary-confidence">
                    <span>AI分析置信度: </span>
                    <div class="confidence-bar">
                      <div 
                        class="confidence-fill"
                        :style="{ width: currentSummary.confidence + '%' }"
                      ></div>
                    </div>
                    <span>{{ currentSummary.confidence }}%</span>
                  </div>
                  <div class="summary-time">
                    生成时间: {{ formatDate(currentSummary.generateTime) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 报表预览区域 -->
          <div class="preview-section">
            <div class="preview-header">
              <h3>报表预览</h3>
              <div class="preview-controls">
                <button class="preview-btn" @click="zoomOut">🔍-</button>
                <span class="zoom-level">{{ previewZoom }}%</span>
                <button class="preview-btn" @click="zoomIn">🔍+</button>
                <button class="preview-btn" @click="toggleFullscreen">
                  {{ isFullscreen ? '🗗' : '⛶' }} {{ isFullscreen ? '退出全屏' : '全屏' }}
                </button>
              </div>
            </div>
            
            <div 
              class="preview-container"
              :class="{ fullscreen: isFullscreen }"
              ref="previewContainer"
            >
              <div class="preview-content" :style="{ transform: `scale(${previewZoom / 100})` }">
                <div v-if="currentReport.format === 'pdf'" class="pdf-preview">
                  <div 
                    v-for="page in currentReport.pages" 
                    :key="page"
                    class="pdf-page"
                  >
                    <div class="page-header">
                      <div class="page-title">{{ currentReport.name }}</div>
                      <div class="page-number">第 {{ page }} 页</div>
                    </div>
                    
                    <div class="page-content">
                      <div v-if="page === 1" class="cover-page">
                        <h1>{{ currentReport.name }}</h1>
                        <div class="report-info">
                          <p>报表类型: {{ getReportTypeText(currentReport.type) }}</p>
                          <p>生成时间: {{ formatDate(currentReport.generateTime) }}</p>
                          <p>时间范围: {{ currentReport.timeRange }}</p>
                        </div>
                      </div>
                      
                      <div v-else-if="page === 2" class="summary-page">
                        <h2>执行摘要</h2>
                        <div class="summary-content">
                          <h3>概览</h3>
                          <p>本报告分析了{{ currentReport.timeRange }}期间的车辆运行数据，包含{{ currentReport.vehicleCount }}台车辆的运行状态、维护情况和性能指标。</p>
                          
                          <h3>主要发现</h3>
                          <ul>
                            <li>整体运行效率较上期提升5.2%</li>
                            <li>故障率下降至0.8%，低于行业平均水平</li>
                            <li>维护成本控制在预算范围内</li>
                          </ul>
                        </div>
                      </div>
                      
                      <div v-else class="data-page">
                        <h2>第{{ page - 2 }}页 数据分析</h2>
                        <div class="chart-placeholder">
                          📊 图表区域 - {{ getChartTitle(page) }}
                        </div>
                        <div class="data-table">
                          <table>
                            <thead>
                              <tr>
                                <th>时间</th>
                                <th>车辆</th>
                                <th>指标</th>
                                <th>数值</th>
                                <th>状态</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr v-for="i in 5" :key="i">
                                <td>2024-03-{{ 10 + i }} 09:00</td>
                                <td>T00{{ i }}</td>
                                <td>运行效率</td>
                                <td>{{ 85 + Math.random() * 10 | 0 }}%</td>
                                <td class="status-normal">正常</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    
                    <div class="page-footer">
                      <div class="footer-left">{{ currentReport.name }}</div>
                      <div class="footer-right">第 {{ page }} 页 / 共 {{ currentReport.pages }} 页</div>
                    </div>
                  </div>
                </div>
                
                <div v-else-if="currentReport.format === 'excel'" class="excel-preview">
                  <div class="excel-toolbar">
                    <div class="toolbar-section">
                      <span class="sheet-tab active">数据概览</span>
                      <span class="sheet-tab">详细数据</span>
                      <span class="sheet-tab">图表分析</span>
                    </div>
                  </div>
                  
                  <div class="excel-content">
                    <div class="excel-table">
                      <table>
                        <thead>
                          <tr>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            <th>F</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>1</td>
                            <td>车辆编号</td>
                            <td>运行时间</td>
                            <td>故障次数</td>
                            <td>维护成本</td>
                            <td>效率评分</td>
                          </tr>
                          <tr v-for="i in 10" :key="i">
                            <td>{{ i + 1 }}</td>
                            <td>T{{ String(i).padStart(3, '0') }}</td>
                            <td>{{ 150 + i * 10 }}h</td>
                            <td>{{ Math.floor(Math.random() * 3) }}</td>
                            <td>¥{{ (5000 + Math.random() * 2000) | 0 }}</td>
                            <td>{{ (85 + Math.random() * 10) | 0 }}%</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                
                <div v-else class="html-preview">
                  <div class="html-content">
                    <h1>{{ currentReport.name }}</h1>
                    <div class="interactive-charts">
                      <div class="chart-container">
                        <h3>运行状态趋势</h3>
                        <div class="chart-placeholder interactive">
                          📈 交互式图表 - 运行状态趋势
                        </div>
                      </div>
                      
                      <div class="chart-container">
                        <h3>故障分析</h3>
                        <div class="chart-placeholder interactive">
                          🍩 交互式饼图 - 故障类型分布
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 全屏关闭按钮 -->
              <button 
                v-if="isFullscreen" 
                class="fullscreen-close"
                @click="toggleFullscreen"
              >
                ×
              </button>
            </div>
          </div>
        </div>
        
        <div v-else class="no-report-selected">
          <div class="no-selection-icon">📊</div>
          <h3>请选择一个报表</h3>
          <p>从左侧列表中选择报表来查看详细内容</p>
        </div>
      </div>
    </div>

    <!-- 分享弹窗 -->
    <div v-if="showShareDialog" class="modal-overlay" @click="closeShareDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>分享报表</h3>
          <button class="close-btn" @click="closeShareDialog">×</button>
        </div>
        
        <div class="modal-body">
          <div class="share-options">
            <div class="share-option" @click="shareByLink">
              <div class="share-icon">🔗</div>
              <div class="share-info">
                <h4>生成分享链接</h4>
                <p>创建一个可分享的链接，其他人可以通过链接查看报表</p>
              </div>
            </div>
            
            <div class="share-option" @click="shareByEmail">
              <div class="share-icon">📧</div>
              <div class="share-info">
                <h4>邮件分享</h4>
                <p>通过邮件将报表发送给指定人员</p>
              </div>
            </div>
            
            <div class="share-option" @click="shareByExport">
              <div class="share-icon">📤</div>
              <div class="share-info">
                <h4>导出分享</h4>
                <p>导出报表文件进行离线分享</p>
              </div>
            </div>
          </div>
          
          <div v-if="shareLink" class="share-link-section">
            <h4>分享链接</h4>
            <div class="link-container">
              <input 
                :value="shareLink" 
                readonly 
                class="link-input"
                ref="linkInput"
              />
              <button class="copy-btn" @click="copyLink">复制</button>
            </div>
            <div class="link-settings">
              <label class="setting-item">
                <input type="checkbox" v-model="shareSettings.requirePassword" />
                <span>需要密码访问</span>
              </label>
              <label class="setting-item">
                <input type="checkbox" v-model="shareSettings.expireTime" />
                <span>设置过期时间</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedType = ref('')
const selectedCategory = ref('')
const sortBy = ref('date')
const currentPage = ref(1)
const itemsPerPage = 8

const selectedReports = ref([])
const currentReport = ref(null)
const currentSummary = ref(null)
const summaryLoading = ref(false)

const previewZoom = ref(100)
const isFullscreen = ref(false)
const previewContainer = ref(null)

const showShareDialog = ref(false)
const shareLink = ref('')
const shareSettings = reactive({
  requirePassword: false,
  expireTime: false
})

// 模拟报表数据
const reports = ref([
  {
    id: 1,
    name: '2024年3月车辆运行日报',
    type: 'daily',
    category: 'operation',
    status: 'completed',
    generateTime: '2024-03-15T09:00:00Z',
    description: '包含所有车辆的日常运行状态、性能指标和关键事件记录',
    pages: 25,
    size: 15728640, // 15MB
    format: 'pdf',
    timeRange: '2024-03-15',
    vehicleCount: 45
  },
  {
    id: 2,
    name: '维护成本分析月报',
    type: 'monthly',
    category: 'maintenance',
    status: 'completed',
    generateTime: '2024-03-10T14:30:00Z',
    description: '详细分析2月份的维护费用、备件消耗和维护效率',
    pages: 18,
    size: 8388608, // 8MB
    format: 'excel',
    timeRange: '2024年2月',
    vehicleCount: 45
  },
  {
    id: 3,
    name: '故障趋势分析周报',
    type: 'weekly',
    category: 'fault',
    status: 'completed',
    generateTime: '2024-03-08T16:45:00Z',
    description: '分析过去一周的故障模式、频率和修复时间',
    pages: 12,
    size: 5242880, // 5MB
    format: 'html',
    timeRange: '2024-03-01 至 2024-03-07',
    vehicleCount: 45
  },
  {
    id: 4,
    name: '性能评估季度报告',
    type: 'quarterly',
    category: 'performance',
    status: 'generating',
    generateTime: '2024-03-01T10:00:00Z',
    description: '第一季度车辆性能综合评估和对比分析',
    pages: 45,
    size: 25165824, // 24MB
    format: 'pdf',
    timeRange: '2024年第一季度',
    vehicleCount: 45
  },
  {
    id: 5,
    name: '设备利用率分析报告',
    type: 'custom',
    category: 'operation',
    status: 'completed',
    generateTime: '2024-02-28T11:20:00Z',
    description: '自定义时间段内的设备利用率统计和分析',
    pages: 22,
    size: 12582912, // 12MB
    format: 'pdf',
    timeRange: '2024-02-01 至 2024-02-28',
    vehicleCount: 45
  }
])

// 计算属性
const filteredReports = computed(() => {
  let filtered = reports.value

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(report => 
      report.name.toLowerCase().includes(query) ||
      report.description.toLowerCase().includes(query)
    )
  }

  if (selectedType.value) {
    filtered = filtered.filter(report => report.type === selectedType.value)
  }

  if (selectedCategory.value) {
    filtered = filtered.filter(report => report.category === selectedCategory.value)
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        return a.name.localeCompare(b.name)
      case 'size':
        return b.size - a.size
      case 'date':
      default:
        return new Date(b.generateTime) - new Date(a.generateTime)
    }
  })

  return filtered
})

const paginatedReports = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filteredReports.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredReports.value.length / itemsPerPage)
})

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

const isAllSelected = computed(() => {
  return paginatedReports.value.length > 0 && 
         paginatedReports.value.every(report => selectedReports.value.includes(report.id))
})

// 方法
const searchReports = () => {
  currentPage.value = 1
  console.log('搜索报表:', searchQuery.value)
}

const toggleReportSelection = (reportId) => {
  const index = selectedReports.value.indexOf(reportId)
  if (index > -1) {
    selectedReports.value.splice(index, 1)
  } else {
    selectedReports.value.push(reportId)
  }
}

const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedReports.value = selectedReports.value.filter(id => 
      !paginatedReports.value.some(report => report.id === id)
    )
  } else {
    paginatedReports.value.forEach(report => {
      if (!selectedReports.value.includes(report.id)) {
        selectedReports.value.push(report.id)
      }
    })
  }
}

const selectReport = (report) => {
  currentReport.value = report
  currentSummary.value = null
  previewZoom.value = 100
}

const getReportIcon = (type) => {
  const iconMap = {
    daily: '📅',
    weekly: '📊',
    monthly: '📈',
    quarterly: '📋',
    annual: '📚',
    custom: '⚙️'
  }
  return iconMap[type] || '📄'
}

const getReportTypeText = (type) => {
  const typeMap = {
    daily: '日报',
    weekly: '周报',
    monthly: '月报',
    quarterly: '季报',
    annual: '年报',
    custom: '自定义'
  }
  return typeMap[type] || type
}

const getCategoryText = (category) => {
  const categoryMap = {
    operation: '运行报告',
    maintenance: '维护报告',
    fault: '故障分析',
    performance: '性能分析',
    cost: '成本分析'
  }
  return categoryMap[category] || category
}

const getStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    generating: '生成中',
    failed: '生成失败'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

const formatFileSize = (bytes) => {
  if (bytes >= 1024 * 1024 * 1024) {
    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + 'GB'
  } else if (bytes >= 1024 * 1024) {
    return (bytes / (1024 * 1024)).toFixed(1) + 'MB'
  } else if (bytes >= 1024) {
    return (bytes / 1024).toFixed(1) + 'KB'
  }
  return bytes + 'B'
}

const getChartTitle = (page) => {
  const titles = [
    '运行时间统计',
    '故障频率分析',
    '维护成本趋势',
    '性能指标对比',
    '利用率分布'
  ]
  return titles[(page - 3) % titles.length]
}

const changePage = (page) => {
  currentPage.value = page
}

const viewReport = (report) => {
  selectReport(report)
  console.log('查看报表:', report.name)
}

const generateSummary = async (report) => {
  if (!report) return
  
  summaryLoading.value = true
  currentSummary.value = null
  
  console.log('生成智能总结:', report.name)
  
  // 模拟AI分析过程
  await new Promise(resolve => setTimeout(resolve, 3000))
  
  // 模拟生成的总结
  currentSummary.value = {
    highlights: [
      '整体运行效率较上期提升5.2%，达到92.8%的优秀水平',
      '故障率从1.2%降至0.8%，主要得益于预防性维护的改进',
      '维护成本控制良好，比预算节约8.5%',
      '关键设备运行时间达到98.5%，超过目标指标'
    ],
    insights: '通过深度分析发现，设备运行效率的提升主要来源于优化的维护策略和及时的故障预警。建议继续加强预防性维护，并重点关注传感器系统的稳定性。数据显示，大部分故障都是可预防的，通过改进监控策略可以进一步降低故障率。',
    recommendations: [
      '建议加强T001-T005车辆的预防性维护，这些车辆故障频率相对较高',
      '优化备件库存管理，重点关注易损件的储备',
      '加强操作员培训，提高设备操作规范性',
      '考虑升级老旧传感器，提高监控精度'
    ],
    confidence: 87,
    generateTime: new Date().toISOString()
  }
  
  summaryLoading.value = false
}

const regenerateSummary = () => {
  if (currentReport.value) {
    generateSummary(currentReport.value)
  }
}

const copySummary = () => {
  if (!currentSummary.value) return
  
  const summaryText = `
智能总结 - ${currentReport.value.name}

关键发现：
${currentSummary.value.highlights.map(h => `• ${h}`).join('\n')}

重要见解：
${currentSummary.value.insights}

建议措施：
${currentSummary.value.recommendations.map(r => `• ${r}`).join('\n')}

AI分析置信度: ${currentSummary.value.confidence}%
生成时间: ${formatDate(currentSummary.value.generateTime)}
  `.trim()
  
  navigator.clipboard.writeText(summaryText).then(() => {
    alert('总结已复制到剪贴板')
  })
}

const exportSummary = () => {
  if (!currentSummary.value) return
  
  const summaryText = `
智能总结 - ${currentReport.value.name}

关键发现：
${currentSummary.value.highlights.map(h => `• ${h}`).join('\n')}

重要见解：
${currentSummary.value.insights}

建议措施：
${currentSummary.value.recommendations.map(r => `• ${r}`).join('\n')}

AI分析置信度: ${currentSummary.value.confidence}%
生成时间: ${formatDate(currentSummary.value.generateTime)}
  `.trim()
  
  const blob = new Blob([summaryText], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `${currentReport.value.name}-智能总结.txt`
  a.click()
  URL.revokeObjectURL(url)
}

const downloadReport = (report) => {
  console.log('下载报表:', report.name)
  // 模拟下载
  const url = `#download-${report.id}`
  const a = document.createElement('a')
  a.href = url
  a.download = `${report.name}.${report.format}`
  a.click()
}

const printReport = (report) => {
  console.log('打印报表:', report.name)
  // 实现打印功能
  window.print()
}

const shareReport = (report) => {
  console.log('分享报表:', report.name)
  showShareDialog.value = true
  shareLink.value = ''
}

const closeShareDialog = () => {
  showShareDialog.value = false
  shareLink.value = ''
}

const shareByLink = () => {
  // 模拟生成分享链接
  shareLink.value = `https://example.com/reports/share/${currentReport.value.id}?token=abc123`
}

const shareByEmail = () => {
  console.log('邮件分享')
  // 实现邮件分享功能
}

const shareByExport = () => {
  console.log('导出分享')
  if (currentReport.value) {
    downloadReport(currentReport.value)
  }
}

const copyLink = () => {
  if (shareLink.value) {
    navigator.clipboard.writeText(shareLink.value).then(() => {
      alert('链接已复制到剪贴板')
    })
  }
}

const deleteReport = (report) => {
  if (confirm(`确定要删除报表 "${report.name}" 吗？`)) {
    const index = reports.value.findIndex(r => r.id === report.id)
    if (index > -1) {
      reports.value.splice(index, 1)
      if (currentReport.value && currentReport.value.id === report.id) {
        currentReport.value = null
        currentSummary.value = null
      }
    }
  }
}

const refreshReports = () => {
  console.log('刷新报表列表')
  // 重新加载数据
}

const bulkExport = () => {
  if (selectedReports.value.length === 0) {
    alert('请先选择要导出的报表')
    return
  }
  
  console.log('批量导出报表:', selectedReports.value)
  // 实现批量导出功能
}

const generateNewReport = () => {
  console.log('生成新报表')
  // 跳转到报表生成页面
}

const zoomIn = () => {
  if (previewZoom.value < 200) {
    previewZoom.value += 10
  }
}

const zoomOut = () => {
  if (previewZoom.value > 50) {
    previewZoom.value -= 10
  }
}

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  
  if (isFullscreen.value) {
    if (previewContainer.value.requestFullscreen) {
      previewContainer.value.requestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

onMounted(() => {
  console.log('报表查看页面已加载')
  
  // 默认选择第一个报表
  if (reports.value.length > 0) {
    currentReport.value = reports.value[0]
  }
  
  // 监听全屏变化
  document.addEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
  })
})
</script>

<style scoped>
.report-viewing-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.page-title {
  font-size: 2.8vw;
  margin: 0 0 0.3vh 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.3vw;
  margin: 0;
  opacity: 0.9;
}

.header-right {
  display: flex;
  gap: 1vw;
}

.header-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.8vh 1.5vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.header-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.header-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border-color: #4CAF50;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 2vh 2vw;
  gap: 2vw;
  height: calc(100vh - 12vh);
}

.reports-panel {
  width: 35vw;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
}

.detail-panel {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  overflow-y: auto;
}

.filter-section {
  margin-bottom: 2vh;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 0.5vh 1vw;
  margin-bottom: 1vh;
}

.search-input {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1vw;
  padding: 0.5vh 1vw;
  outline: none;
  flex: 1;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.search-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2vw;
  cursor: pointer;
  padding: 0.3vh;
}

.filter-controls {
  display: flex;
  gap: 1vw;
}

.filter-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  padding: 0.6vh 1vw;
  font-size: 0.9vw;
  outline: none;
  flex: 1;
}

.filter-select option {
  background: #333;
  color: #fff;
}

.reports-list {
  flex: 1;
  overflow-y: auto;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 1vh;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.9vw;
  cursor: pointer;
}

.report-count {
  font-size: 0.9vw;
  opacity: 0.8;
}

.report-item {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1.5vh 1vw;
  margin-bottom: 1vh;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.report-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.report-item.selected {
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.report-item.active {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.report-header {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-bottom: 0.8vh;
}

.report-checkbox {
  cursor: pointer;
}

.report-icon {
  font-size: 1.5vw;
}

.report-info {
  flex: 1;
}

.report-name {
  font-size: 1.1vw;
  margin: 0 0 0.3vh 0;
  font-weight: 600;
}

.report-meta {
  display: flex;
  gap: 1vw;
  font-size: 0.8vw;
  opacity: 0.7;
}

.report-type {
  background: rgba(76, 175, 80, 0.3);
  padding: 0.1vh 0.5vw;
  border-radius: 8px;
}

.report-status {
  padding: 0.3vh 0.8vw;
  border-radius: 12px;
  font-size: 0.8vw;
  font-weight: 600;
}

.report-status.completed {
  background: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.report-status.generating {
  background: rgba(255, 152, 0, 0.3);
  color: #FF9800;
}

.report-status.failed {
  background: rgba(244, 67, 54, 0.3);
  color: #F44336;
}

.report-description {
  font-size: 0.9vw;
  opacity: 0.8;
  margin-bottom: 0.8vh;
  line-height: 1.4;
}

.report-stats {
  display: flex;
  gap: 1.5vw;
  margin-bottom: 1vh;
  font-size: 0.8vw;
}

.stat-item {
  display: flex;
  gap: 0.3vw;
}

.stat-label {
  opacity: 0.7;
}

.stat-value {
  font-weight: 600;
}

.report-actions {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
}

.action-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.4vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8vw;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255,255,255,0.2);
}

.action-btn.summary {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.action-btn.delete {
  background: rgba(244, 67, 54, 0.2);
  border-color: #F44336;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  margin-top: 1vh;
  padding-top: 1vh;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.page-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.6vh 1.2vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 0.3vw;
}

.page-number {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.5vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.page-number:hover {
  background: rgba(255,255,255,0.2);
}

.page-number.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

.report-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.detail-title h2 {
  margin: 0 0 0.5vh 0;
  font-size: 1.8vw;
  color: #4CAF50;
}

.detail-meta {
  display: flex;
  gap: 2vw;
  font-size: 0.9vw;
  opacity: 0.8;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.meta-icon {
  font-size: 1vw;
}

.detail-actions {
  display: flex;
  gap: 1vw;
}

.detail-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  transition: all 0.3s ease;
}

.detail-btn:hover {
  background: rgba(255,255,255,0.2);
}

.detail-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border-color: #4CAF50;
}

.summary-section {
  margin-bottom: 3vh;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 10px;
  padding: 2vh 1.5vw;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.summary-header h3 {
  margin: 0;
  font-size: 1.5vw;
  color: #4CAF50;
}

.summary-actions {
  display: flex;
  gap: 0.8vw;
}

.summary-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.summary-btn:hover {
  background: rgba(255,255,255,0.2);
}

.summary-loading {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 3vh 0;
  justify-content: center;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.summary-text {
  font-size: 1vw;
  line-height: 1.6;
}

.summary-highlights, .summary-insights, .summary-recommendations {
  margin-bottom: 2vh;
}

.summary-highlights h4, .summary-insights h4, .summary-recommendations h4 {
  margin: 0 0 1vh 0;
  font-size: 1.2vw;
  color: #4CAF50;
}

.summary-highlights ul, .summary-recommendations ul {
  margin: 0;
  padding-left: 2vw;
}

.summary-highlights li, .summary-recommendations li {
  margin-bottom: 0.5vh;
}

.summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
  padding-top: 1vh;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.9vw;
}

.summary-confidence {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.confidence-bar {
  width: 100px;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transition: width 0.3s ease;
}

.preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.preview-header h3 {
  margin: 0;
  font-size: 1.4vw;
  color: #4CAF50;
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.preview-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.preview-btn:hover {
  background: rgba(255,255,255,0.2);
}

.zoom-level {
  font-size: 0.9vw;
  min-width: 50px;
  text-align: center;
}

.preview-container {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  overflow: auto;
  position: relative;
}

.preview-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  border-radius: 0;
}

.preview-content {
  transform-origin: top left;
  transition: transform 0.3s ease;
}

.fullscreen-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  border: none;
  color: #fff;
  font-size: 2vw;
  padding: 0.5vh 1vw;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;
}

/* PDF预览样式 */
.pdf-preview {
  padding: 2vh;
}

.pdf-page {
  background: #fff;
  color: #000;
  margin-bottom: 2vh;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  border-bottom: 2px solid #4CAF50;
  background: #f5f5f5;
}

.page-title {
  font-size: 1.2vw;
  font-weight: 600;
  color: #333;
}

.page-number {
  font-size: 1vw;
  color: #666;
}

.page-content {
  flex: 1;
  padding: 3vh 2vw;
}

.cover-page {
  text-align: center;
  padding: 10vh 0;
}

.cover-page h1 {
  font-size: 2.5vw;
  margin-bottom: 5vh;
  color: #4CAF50;
}

.report-info p {
  font-size: 1.2vw;
  margin-bottom: 1vh;
  color: #666;
}

.summary-page h2, .data-page h2 {
  font-size: 1.8vw;
  margin-bottom: 2vh;
  color: #4CAF50;
}

.summary-page h3, .data-page h3 {
  font-size: 1.4vw;
  margin: 2vh 0 1vh 0;
  color: #333;
}

.chart-placeholder {
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 5vh 2vw;
  text-align: center;
  font-size: 1.2vw;
  color: #666;
  margin: 2vh 0;
}

.chart-placeholder.interactive {
  background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
  border-color: #4CAF50;
  color: #4CAF50;
}

.data-table {
  margin-top: 2vh;
  overflow-x: auto;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9vw;
}

.data-table th {
  background: #4CAF50;
  color: #fff;
  padding: 1vh 1vw;
  text-align: left;
  font-weight: 600;
}

.data-table td {
  padding: 0.8vh 1vw;
  border-bottom: 1px solid #ddd;
}

.data-table .status-normal {
  color: #4CAF50;
  font-weight: 600;
}

.page-footer {
  padding: 1vh 2vw;
  border-top: 1px solid #ddd;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  font-size: 0.9vw;
  color: #666;
}

/* Excel预览样式 */
.excel-preview {
  background: #fff;
  color: #000;
}

.excel-toolbar {
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
  padding: 0.5vh 1vw;
}

.sheet-tab {
  display: inline-block;
  padding: 0.8vh 1.5vw;
  margin-right: 0.5vw;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
  font-size: 0.9vw;
}

.sheet-tab.active {
  background: #4CAF50;
  color: #fff;
  border-color: #4CAF50;
}

.excel-content {
  padding: 1vh;
}

.excel-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8vw;
}

.excel-table th {
  background: #e0e0e0;
  padding: 0.5vh 1vw;
  border: 1px solid #ccc;
  font-weight: 600;
  text-align: center;
}

.excel-table td {
  padding: 0.5vh 1vw;
  border: 1px solid #ccc;
  text-align: center;
}

/* HTML预览样式 */
.html-preview {
  background: #fff;
  color: #000;
  padding: 2vh;
}

.html-content h1 {
  font-size: 2vw;
  color: #4CAF50;
  text-align: center;
  margin-bottom: 3vh;
}

.interactive-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
}

.chart-container h3 {
  font-size: 1.3vw;
  margin-bottom: 1vh;
  color: #333;
}

.no-report-selected {
  text-align: center;
  padding: 10vh 0;
  opacity: 0.7;
}

.no-selection-icon {
  font-size: 5vw;
  margin-bottom: 2vh;
}

.no-report-selected h3 {
  font-size: 2vw;
  margin-bottom: 1vh;
}

.no-report-selected p {
  font-size: 1.2vw;
  opacity: 0.8;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  border-radius: 15px;
  width: 50vw;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.6vw;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8vw;
  cursor: pointer;
  padding: 0.3vh 0.8vw;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,255,255,0.1);
}

.modal-body {
  padding: 2vh 2vw;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-bottom: 2vh;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: 1.5vh 1vw;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.2);
}

.share-option:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.share-icon {
  font-size: 2vw;
}

.share-info h4 {
  margin: 0 0 0.5vh 0;
  font-size: 1.2vw;
}

.share-info p {
  margin: 0;
  font-size: 0.9vw;
  opacity: 0.8;
}

.share-link-section h4 {
  margin: 0 0 1vh 0;
  font-size: 1.3vw;
  color: #4CAF50;
}

.link-container {
  display: flex;
  gap: 1vw;
  margin-bottom: 1vh;
}

.link-input {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  color: #fff;
  padding: 0.8vh 1vw;
  font-size: 0.9vw;
  outline: none;
}

.copy-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
}

.link-settings {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  font-size: 0.9vw;
  cursor: pointer;
}

.setting-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #4CAF50;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    height: auto;
  }
  
  .reports-panel {
    width: 100%;
    max-height: 50vh;
  }
  
  .page-title {
    font-size: 5vw;
  }
  
  .page-subtitle {
    font-size: 2.5vw;
  }
  
  .header-btn {
    font-size: 2vw;
    padding: 1vh 2vw;
  }
  
  .filter-controls {
    flex-direction: column;
  }
  
  .report-name {
    font-size: 2.5vw;
  }
  
  .report-meta {
    flex-direction: column;
    gap: 0.5vh;
  }
  
  .report-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .action-btn {
    font-size: 2vw;
  }
  
  .detail-title h2 {
    font-size: 3.5vw;
  }
  
  .detail-meta {
    flex-direction: column;
    gap: 1vh;
  }
  
  .detail-actions {
    flex-direction: column;
  }
  
  .preview-controls {
    flex-wrap: wrap;
  }
  
  .modal-content {
    width: 95vw;
    margin: 1vh;
  }
}
</style>
